<!--
 * Copyright © 2025 上海火金网络科技有限公司. All rights reserved.
 * Service Provider Channel Config Modal - 服务商渠道配置模态框
 *
 * 功能：服务商模式下的渠道配置管理，支持Protocol3动态协议
 * 版本：2.0.0 - 移除兼容性包袱，只支持Protocol3
 *
 * Website: https://www.anypay.com
-->

<template>
  <a-modal
    :open="visible"
    :title="`${provider?.providerName} - 支付渠道配置`"
    width="95%"
    :footer="null"
    @cancel="handleClose"
    @update:open="$emit('update:visible', $event)"
    class="channel-config-modal"
  >
    <div class="channel-config-workspace">
      <!-- 左侧渠道列表 -->
      <div class="channel-sidebar">
        <div class="sidebar-header">
          <h3>支付渠道</h3>
        </div>

        <div class="channel-list">
          <div
            v-for="template in state.channelTemplates"
            :key="template.channelId"
            class="channel-item"
            :class="{
              'active': state.selectedChannelId === template.channelId
            }"
            @click="handleChannelSelect(template.channelId)"
          >
            <div class="channel-item-content">
              <div class="channel-basic">
                <img :src="template.iconUrl" :alt="template.channelName" class="channel-icon" />
                <div class="channel-info">
                  <div class="channel-name">{{ template.channelName }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧配置详情 -->
      <div class="channel-detail">
        <div v-if="state.loading && !state.initialized" class="loading-state">
          <a-skeleton active :paragraph="{ rows: 8 }" />
        </div>

        <div v-else-if="!state.selectedChannelId" class="empty-state">
          <a-empty description="请选择要配置的渠道" />
        </div>

        <div v-else class="channel-detail-content">
          <div class="detail-header">
            <div class="channel-title">
              <img :src="selectedChannelTemplate?.iconUrl" :alt="selectedChannelTemplate?.channelName" class="channel-icon" />
              <div>
                <h3>{{ selectedChannelTemplate?.channelName }}</h3>
                <p class="channel-desc">{{ selectedChannelTemplate?.description }}</p>
              </div>
            </div>

            <div class="detail-actions">
              <!-- 控制开关组 -->
              <div style="display: flex; gap: 16px; align-items: center;">
                <!-- Protocol3模式显示 -->
                <div class="mode-switch-control" style="display: flex; align-items: center;">
                  <span style="color: #666; font-size: 13px; margin-right: 8px;">配置模式：</span>
                  <a-tag color="blue" size="small">
                    Protocol3
                  </a-tag>
                  <span style="color: #666; font-size: 12px; margin-left: 8px;">
                    动态协议
                  </span>
                </div>

                <!-- 启用状态开关 -->
                <div class="channel-status-control" style="display: flex; align-items: center;">
                  <span style="color: #666; font-size: 13px; margin-right: 8px;">启用状态：</span>
                  <a-switch
                    v-model:checked="selectedChannelConfig.enabled"
                    @change="handleChannelToggle(state.selectedChannelId, $event)"
                    size="small"
                  />
                  <span style="color: #666; font-size: 12px; margin-left: 8px;">
                    {{ selectedChannelConfig.enabled ? '已启用' : '已禁用' }}
                  </span>
                </div>
              </div>
            </div>
          </div>

          <!-- 配置表单 - Protocol3 Tab界面 -->
          <div class="config-form-container">
            <!-- Protocol3协议信息显示 -->
            <div style="margin-bottom: 16px; padding: 12px 16px; background: #fafafa; border: 1px solid #e8e8e8; border-radius: 6px;">
              <div style="display: flex; align-items: center; gap: 8px;">
                <span style="color: #666; font-size: 13px;">📋 当前协议：</span>
                <span style="color: #1890ff; font-weight: 500; font-size: 13px;">{{ currentProtocolId }}</span>
                <span
                  v-if="protocolInfo?.isDefault"
                  style="color: #722ed1; font-size: 12px; background: #f9f0ff; padding: 2px 6px; border-radius: 4px; border: 1px solid #d3adf7;"
                >
                  兜底协议
                </span>
                <span
                  v-if="protocolInfo?.source === 'protocol3'"
                  style="color: #1890ff; font-size: 12px; background: #e6f7ff; padding: 2px 6px; border-radius: 4px; border: 1px solid #91d5ff;"
                >
                  Protocol3
                </span>
                <span
                  v-else-if="protocolInfo?.source === 'fallback'"
                  style="color: #722ed1; font-size: 12px; background: #f9f0ff; padding: 2px 6px; border-radius: 4px; border: 1px solid #d3adf7;"
                >
                  自动适配
                </span>
              </div>
            </div>

            <a-tabs v-model:activeKey="state.configActiveTab" type="card">
              <!-- Protocol3模式 -->
              <!-- 渲染Protocol3分区Tab -->
              <a-tab-pane
                v-for="section in configSections"
                :key="section.key"
                :tab="section.tab"
              >
                <a-form layout="vertical" :model="selectedChannelConfig">
                  <!-- 渲染该分区的字段 -->
                  <a-card :title="section.tab" size="small" style="margin-bottom: 16px;">
                    <a-row :gutter="16">
                      <a-col
                        v-for="field in section.fields"
                        :key="field.fieldKey"
                        :span="getFieldSpan(field.fieldType)"
                      >
                        <a-form-item
                          :label="field.fieldName"
                          :required="field.required"
                          :help="field.description || field.placeholder"
                        >
                          <!-- 输入框 -->
                          <a-input
                            v-if="field.fieldType === 'input'"
                            :value="getFieldValue(field.fieldKey, section.key)"
                            @update:value="setFieldValue(field.fieldKey, section.key, $event)"
                            :placeholder="field.placeholder"
                          />
                          <!-- 密码框 -->
                          <a-input-password
                            v-else-if="field.fieldType === 'password'"
                            :value="getFieldValue(field.fieldKey, section.key)"
                            @update:value="setFieldValue(field.fieldKey, section.key, $event)"
                            :placeholder="field.placeholder"
                          />
                          <!-- 选择框 -->
                          <a-select
                            v-else-if="field.fieldType === 'select'"
                            :value="getFieldValue(field.fieldKey, section.key)"
                            @update:value="setFieldValue(field.fieldKey, section.key, $event)"
                            :placeholder="field.placeholder"
                          >
                            <a-select-option
                              v-for="option in field.options"
                              :key="option.value"
                              :value="option.value"
                            >
                              {{ option.label }}
                            </a-select-option>
                          </a-select>
                          <!-- 文本域 -->
                          <a-textarea
                            v-else-if="field.fieldType === 'textarea'"
                            :value="getFieldValue(field.fieldKey, section.key)"
                            @update:value="setFieldValue(field.fieldKey, section.key, $event)"
                            :placeholder="field.placeholder"
                            :rows="4"
                          />
                          <!-- 文件上传 -->
                          <a-upload
                            v-else-if="field.fieldType === 'upload'"
                            :before-upload="() => false"
                            :file-list="[]"
                            @change="(info: any) => handleFileUpload(field.fieldKey, section.key, info)"
                          >
                            <a-button>
                              <template #icon>
                                <UploadOutlined />
                              </template>
                              选择文件
                            </a-button>
                            <div class="upload-tip">{{ field.placeholder }}</div>
                          </a-upload>
                          <!-- URL输入框 -->
                          <a-input
                            v-else-if="field.fieldType === 'url'"
                            :value="getFieldValue(field.fieldKey, section.key)"
                            @update:value="setFieldValue(field.fieldKey, section.key, $event)"
                            :placeholder="field.placeholder"
                          />
                          <!-- 数字输入框 -->
                          <a-input-number
                            v-else-if="field.fieldType === 'number'"
                            :value="getFieldValue(field.fieldKey, section.key)"
                            @update:value="setFieldValue(field.fieldKey, section.key, $event)"
                            :placeholder="field.placeholder"
                            style="width: 100%"
                          />
                          <!-- 开关 -->
                          <a-switch
                            v-else-if="field.fieldType === 'switch'"
                            :checked="getFieldValue(field.fieldKey, section.key)"
                            @update:checked="setFieldValue(field.fieldKey, section.key, $event)"
                          />
                          <!-- 单选框 -->
                          <a-radio-group
                            v-else-if="field.fieldType === 'radio'"
                            :value="getFieldValue(field.fieldKey, section.key)"
                            @update:value="setFieldValue(field.fieldKey, section.key, $event)"
                          >
                            <a-radio
                              v-for="option in (field.options || [])"
                              :key="option.value"
                              :value="option.value"
                            >
                              {{ option.label }}
                            </a-radio>
                          </a-radio-group>
                        </a-form-item>
                      </a-col>
                    </a-row>
                  </a-card>
                </a-form>
              </a-tab-pane>
            </a-tabs>
          </div>

          <!-- 固定保存按钮 -->
          <div class="fixed-save-button">
            <a-button
              type="primary"
              size="large"
              @click="handleSaveChannelConfig(state.selectedChannelId)"
              :loading="state.savingChannels.includes(state.selectedChannelId)"
            >
              <template #icon>
                <SaveOutlined />
              </template>
              保存配置
            </a-button>
          </div>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { reactive, computed, watch } from 'vue'
import { message } from 'ant-design-vue'
import { UploadOutlined, SaveOutlined } from '@ant-design/icons-vue'
import {
  mockGetProviderChannelConfigs,
  mockSaveProviderChannelConfig,
  getAllConfigurableChannels,
  type ServiceProvider
} from '@/mock/service-providers'
import { protocol3Manager } from '@/mock/protocol3-manager'
import { initializeSampleData } from '@/mock/protocol3-sample-data'

// Props
interface Props {
  visible: boolean
  provider?: ServiceProvider | null
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  provider: null
})

// Emits
const emit = defineEmits<{
  'update:visible': [visible: boolean]
  'success': []
}>()

// 渠道模板接口定义（简化版，只保留Protocol3需要的字段）
interface ChannelTemplate {
  channelId: string
  channelName: string
  channelCode: string
  iconUrl: string
  description: string
}

// 服务商渠道配置接口定义（简化版）
interface ServiceProviderChannelConfig {
  id: string
  providerId: string
  channelId: string
  channelName: string
  enabled: boolean
  configData: Record<string, any>
  status: 'ACTIVE' | 'INACTIVE'
  createdTime: string
  updatedTime: string
}

// 核心状态 - 统一的响应式状态管理
const state = reactive({
  channelTemplates: [] as ChannelTemplate[],
  providerChannelConfigs: [] as ServiceProviderChannelConfig[],
  selectedChannelId: '',
  configActiveTab: '',
  loading: false,
  initialized: false,
  protocol3Ready: false,
  savingChannels: [] as string[]
})

// 计算属性
const selectedChannelTemplate = computed(() => {
  return state.channelTemplates.find(t => t.channelId === state.selectedChannelId)
})

const selectedChannelConfig = computed(() => {
  return getChannelConfig(state.selectedChannelId)
})

// 获取当前选中渠道的协议 - 使用protocol3Manager方式
const selectedChannelProtocol = computed(() => {
  const template = selectedChannelTemplate.value
  if (!template || !state.protocol3Ready) return null

  try {
    // 使用protocol3Manager根据约定获取协议
    const protocolCode = template.channelCode.replace('CHANNEL_IF_', 'CHANNEL_PROTOCOL_')
    const protocolId = protocol3Manager.getProtocolByConvention(protocolCode, 'PROVIDER')

    if (protocolId) {
      const protocol = protocol3Manager.getProtocol(protocolId)
      return protocol
    }

    return null
  } catch (error) {
    console.warn('获取渠道协议失败:', error)
    return null
  }
})

// 获取当前协议ID - 使用protocol3Manager方式
const currentProtocolId = computed(() => {
  const template = selectedChannelTemplate.value
  if (!template) return '未知协议'

  try {
    // 使用protocol3Manager根据约定获取协议ID
    const protocolCode = template.channelCode.replace('CHANNEL_IF_', 'CHANNEL_PROTOCOL_')
    const protocolId = protocol3Manager.getProtocolByConvention(protocolCode, 'PROVIDER')

    return protocolId || '未知协议'
  } catch (error) {
    console.warn('获取协议ID失败:', error)
    return '未知协议'
  }
})

// 获取协议信息（包括是否为默认协议）- 使用protocol3Manager方式
const protocolInfo = computed(() => {
  const template = selectedChannelTemplate.value
  if (!template) return null

  try {
    // 使用protocol3Manager根据约定获取协议
    const protocolCode = template.channelCode.replace('CHANNEL_IF_', 'CHANNEL_PROTOCOL_')
    const protocolId = protocol3Manager.getProtocolByConvention(protocolCode, 'PROVIDER')

    if (protocolId) {
      const protocol = protocol3Manager.getProtocol(protocolId)

      return {
        protocol: protocol,
        protocolId: protocolId,
        isDefault: protocolId === 'DEFAULT_PROTOCOL_FALLBACK_001',
        source: protocolId === 'DEFAULT_PROTOCOL_FALLBACK_001' ? 'fallback' : 'protocol3'
      }
    }

    return null
  } catch (error) {
    console.warn('获取协议信息失败:', error)
    return null
  }
})

// Protocol3 配置分区 - 作为tabs
const configSections = computed(() => {
  // 必须满足所有条件才能渲染配置分区
  if (!state.selectedChannelId || !state.initialized || !state.protocol3Ready) {
    return []
  }

  const protocol = selectedChannelProtocol.value
  if (!protocol?.configSections?.length) {
    console.log('[配置分区] 协议或配置分区不可用:', {
      hasSelectedChannel: !!state.selectedChannelId,
      hasProtocol: !!protocol,
      hasConfigSections: !!protocol?.configSections?.length,
      initialized: state.initialized,
      protocol3Ready: state.protocol3Ready
    })
    return []
  }

  const sections = protocol.configSections.map((section: any) => ({
    key: section.sectionKey,
    tab: section.sectionName,
    icon: section.icon,
    description: section.description,
    fields: section.fields,
    order: section.order || 0,
    collapsed: section.collapsed || false
  })).sort((a: any, b: any) => a.order - b.order)

  console.log(`[配置分区] 渠道: ${state.selectedChannelId}, 协议: ${protocol.protocolId}, 分区数量: ${sections.length}`)
  return sections
})

// 统一的状态管理函数
const updateChannelState = (channelId: string) => {
  state.selectedChannelId = channelId

  // 同步更新活动tab（基于当前可用的配置分区）
  const sections = configSections.value
  if (sections.length > 0) {
    state.configActiveTab = sections[0].key
    console.log(`[状态更新] 渠道: ${channelId}, 设置活动tab: ${state.configActiveTab}`)
  } else {
    state.configActiveTab = ''
    console.log(`[状态更新] 渠道: ${channelId}, 清空活动tab (无配置分区)`)
  }
}

// 监听配置分区变化，自动修正活动tab
watch([configSections], (newSections) => {
  // 如果当前活动tab不在新的分区列表中，则重新设置
  if (newSections.length > 0) {
    const currentTabExists = newSections.some(section => section.key === state.configActiveTab)
    if (!currentTabExists) {
      state.configActiveTab = newSections[0].key
      console.log(`[配置分区监听] 修正活动tab: ${state.configActiveTab}`)
    }
  } else {
    state.configActiveTab = ''
  }
}, { immediate: true })

// 重置状态
const resetState = () => {
  Object.assign(state, {
    channelTemplates: [],
    providerChannelConfigs: [],
    selectedChannelId: '',
    configActiveTab: '',
    loading: false,
    initialized: false,
    protocol3Ready: false,
    savingChannels: []
  })
}

// 方法
const handleClose = () => {
  emit('update:visible', false)
  resetState()
}

const handleChannelSelect = (channelId: string) => {
  console.log(`[渠道选择] 选择渠道: ${channelId}`)
  updateChannelState(channelId)
}

const getChannelConfig = (channelId: string): ServiceProviderChannelConfig => {
  let config = state.providerChannelConfigs.find(c => c.channelId === channelId)
  if (!config) {
    const template = state.channelTemplates.find(t => t.channelId === channelId)
    config = {
      id: '',
      providerId: props.provider?.providerId || '',
      channelId: channelId,
      channelName: template?.channelName || '',
      enabled: false,
      configData: generateDefaultConfigData(template?.channelCode || ''),
      status: 'INACTIVE',
      createdTime: new Date().toLocaleString(),
      updatedTime: new Date().toLocaleString()
    }
    state.providerChannelConfigs.push(config)
  }
  return config
}

// 生成默认配置数据（基于Protocol3协议）
const generateDefaultConfigData = (channelCode: string): Record<string, any> => {
  try {
    const protocolCode = channelCode.replace('CHANNEL_IF_', 'CHANNEL_PROTOCOL_')
    const protocolId = protocol3Manager.getProtocolByConvention(protocolCode, 'PROVIDER')

    if (protocolId) {
      const protocol = protocol3Manager.getProtocol(protocolId)
      const defaultData: Record<string, any> = {}

      // 从协议的配置分区中生成分区结构
      protocol?.configSections?.forEach(section => {
        const sectionData: Record<string, any> = {}

        // 从分区的默认值中提取
        if (section.defaultValues) {
          Object.assign(sectionData, section.defaultValues)
        }

        // 从字段中提取默认值
        section.fields?.forEach(field => {
          if (field.defaultValue !== undefined) {
            sectionData[field.fieldKey] = field.defaultValue
          }
        })

        // 将分区数据添加到根对象
        defaultData[section.sectionKey] = sectionData
      })

      return defaultData
    }

    return {}
  } catch (error) {
    console.warn('生成默认配置数据失败:', error)
    return {}
  }
}

const getFieldSpan = (fieldType: string): number => {
  // 支持更多 Protocol3 字段类型
  const fullWidthFields = ['textarea', 'upload']
  return fullWidthFields.includes(fieldType) ? 24 : 12
}

const handleChannelToggle = (channelId: string, enabled: boolean) => {
  const config = getChannelConfig(channelId)
  config.enabled = enabled
  config.status = enabled ? 'ACTIVE' : 'INACTIVE'
  config.updatedTime = new Date().toLocaleString()

  // 如果启用了渠道且当前没有选中任何渠道，则选中这个渠道
  if (enabled && !state.selectedChannelId) {
    updateChannelState(channelId)
  }
}

const handleFileUpload = (fieldKey: string, sectionKey: string, info: any) => {
  if (info.file.status === 'done') {
    setFieldValue(fieldKey, sectionKey, info.file.response?.url || info.file.name)
    message.success('文件上传成功')
  } else if (info.file.status === 'error') {
    message.error('文件上传失败')
  } else {
    // 预览模式，直接使用文件名
    setFieldValue(fieldKey, sectionKey, info.file.name)
    message.success(`文件 ${info.file.name} 已选择`)
  }
}

// 获取字段值（Protocol3分区结构）
const getFieldValue = (fieldKey: string, sectionKey: string) => {
  const config = selectedChannelConfig.value
  if (!config || !config.configData) return ''

  // 从分区结构中获取
  if (config.configData[sectionKey] && config.configData[sectionKey][fieldKey] !== undefined) {
    return config.configData[sectionKey][fieldKey]
  }

  return ''
}

// 设置字段值（Protocol3分区结构）
const setFieldValue = (fieldKey: string, sectionKey: string, value: any) => {
  const config = selectedChannelConfig.value
  if (!config || !config.configData) return

  // 确保分区结构存在
  if (!config.configData[sectionKey]) {
    config.configData[sectionKey] = {}
  }

  // 设置分区中的字段值
  config.configData[sectionKey][fieldKey] = value

  // console.log(`[setFieldValue] 设置字段: ${sectionKey}.${fieldKey} = ${value}`)
  // console.log(`[setFieldValue] 当前配置数据:`, config.configData)
}

const handleSaveChannelConfig = async (channelId: string) => {
  if (!props.provider) return

  state.savingChannels.push(channelId)
  try {
    const config = getChannelConfig(channelId)
    config.id = config.id || `SPCC${Date.now()}`
    config.updatedTime = new Date().toLocaleString()

    await mockSaveProviderChannelConfig(config)
    message.success('保存配置成功')
    emit('success')
  } catch (error) {
    message.error('保存配置失败')
  } finally {
    state.savingChannels = state.savingChannels.filter(id => id !== channelId)
  }
}

// Protocol3 数据初始化
const initializeProtocol3Data = async () => {
  try {
    console.log('[初始化] 开始初始化Protocol3数据...')
    await initializeSampleData()
    state.protocol3Ready = true
    console.log('[初始化] Protocol3数据初始化完成')
  } catch (error) {
    console.error('[初始化] Protocol3数据初始化失败:', error)
    throw error
  }
}

const loadProviderChannelConfigs = async (providerId: string) => {
  state.loading = true
  try {
    // 先加载服务商已有的渠道配置
    const response = await mockGetProviderChannelConfigs(providerId) as any
    state.providerChannelConfigs = response.data

    // 加载所有可配置的渠道（Protocol3模式）
    const configurableChannels = getAllConfigurableChannels()
    state.channelTemplates = configurableChannels.map(channel => ({
      channelId: channel.channelId,
      channelName: channel.channelName,
      channelCode: channel.channelCode,
      iconUrl: channel.iconUrl,
      description: channel.description || `${channel.channelName}支付接口配置`
    }))

    // 自动选择第一个可用渠道
    if (!state.selectedChannelId && state.channelTemplates.length > 0) {
      const firstEnabledChannel = state.providerChannelConfigs.find(c => c.enabled)
      const firstChannelId = firstEnabledChannel?.channelId || state.channelTemplates[0]?.channelId || ''
      console.log(`[加载配置] 自动选择第一个渠道: ${firstChannelId}`)
      updateChannelState(firstChannelId)
    }

    state.initialized = true
  } catch (error) {
    message.error('加载渠道配置失败')
  } finally {
    state.loading = false
  }
}

// 完整的初始化流程
const initializeModal = async () => {
  if (!props.provider || state.initialized) return

  state.loading = true
  try {
    // 1. 初始化Protocol3数据
    await initializeProtocol3Data()

    // 2. 加载渠道配置
    await loadProviderChannelConfigs(props.provider.providerId)

    console.log('[初始化] 模态框初始化完成')
  } catch (error) {
    console.error('[初始化] 模态框初始化失败:', error)
    message.error('初始化失败: ' + (error as Error).message)
  } finally {
    state.loading = false
  }
}

// 监听provider变化
watch(
  () => props.provider,
  async (newProvider) => {
    if (newProvider && props.visible) {
      await initializeModal()
    }
  },
  { immediate: true }
)

// 监听visible变化
watch(
  () => props.visible,
  async (visible) => {
    if (visible && props.provider) {
      await initializeModal()
    } else if (!visible) {
      resetState()
    }
  }
)
</script>

<style scoped>
/* 渠道配置工作区样式 */
.channel-config-modal :deep(.ant-modal-body) {
  padding: 0;
}

.channel-config-workspace {
  display: flex;
  height: 92vh;
  min-height: 800px;
  max-height: 1000px;
}

.channel-sidebar {
  width: 320px;
  border-right: 1px solid #f0f0f0;
  background: #fafafa;
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
}

.sidebar-header h3 {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.channel-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.channel-item {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  margin-bottom: 8px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.channel-item:hover {
  border-color: #1890ff;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.1);
}

.channel-item.active {
  border-color: #1890ff;
  background: #e6f7ff;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2);
}

.channel-item-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.channel-basic {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.channel-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  object-fit: cover;
}

.channel-info {
  flex: 1;
}

.channel-name {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 2px;
}

.channel-detail {
  flex: 1;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.loading-state,
.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background: #fafafa;
}

.channel-detail-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.detail-header {
  padding: 20px 24px;
  border-bottom: 1px solid #f0f0f0;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.channel-title {
  display: flex;
  align-items: center;
  gap: 16px;
}

.channel-title .channel-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
}

.channel-title h3 {
  margin: 0 0 4px 0;
  font-size: 18px;
  color: #333;
}

.channel-desc {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.config-form-container {
  flex: 1;
  padding: 20px 24px;
  overflow-y: auto;
  background: #fafafa;
}

.config-tabs :deep(.ant-tabs-content-holder) {
  padding: 0;
}

.fixed-save-button {
  position: absolute;
  bottom: 24px;
  right: 24px;
  z-index: 100;
}
</style>